import React, { useState, useEffect } from 'react'
import { Card, Button, Table } from "antd"
import {findAllRoleApi} from "../../../apis/role"
import MyDrawer from '../../../components/MyDrawer'

export default function Role() {
  const [roles, setRoles] = useState([])
  const [open,setOpen] = useState(false)
  const [selectRole,setSelectRole] = useState({})

  useEffect(() => {
    fetchData()
  }, [])

  const fetchData =async ()=>{
    const res = await findAllRoleApi()
    setRoles(res.data.data)
    console.log(res.data.data);
  }

  const auth = (roleObj) => {
    console.log(roleObj);
    setOpen(true)
    setSelectRole(roleObj)
  }

  const columns = [
    {
      title: '角色名字',
      dataIndex: 'name'
    },
    {
      title: '创建日期',
      dataIndex: 'createTime'
    },
    {
      title: '授权人',
      dataIndex: 'authUser',
    },
    {
      title: '授权日期',
      dataIndex: "authTime"
    },
    {
      title: '操作',
      width: "140px",
      render: (text) => {
        return (
          <span>
            <Button type='default'>删除</Button>&nbsp;&nbsp;
            <Button type="dashed" onClick={()=>auth(text)}>授权</Button>&nbsp;&nbsp;
          </span>
        )
      }
    }
  ];
  const search = (
    <span>
      <Button type="primary">添加角色</Button>&nbsp;&nbsp;&nbsp;&nbsp;
    </span>
  )
  return (
    <div>
      <Card title={search} style={{ width: "100%" }}>
        <Table
          columns={columns}
          dataSource={roles}
          bordered
          rowKey="_id"
          pagination={{ defaultPageSize: 5, showQuickJumper: true }}
          loading={false}
        />
      </Card>
      {open==true?<MyDrawer role={selectRole} fetchData={fetchData} setOpen={setOpen}></MyDrawer>:null}
      {/* <MyDrawer></MyDrawer> */}
    </div>
  )
}
